<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>user_center</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-inline{
				height: auto;
				width: auto;
				
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-content{
					background-color:rgb(117,195,235);		
			}
			
		</style>
	</head>

	<body onload="onloadbody()">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人中心</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="height:55vw;background-image:url(img/log_education.png);background-size: 100%;"></div>
			<div class="mui-content-padded">
				<center>
				<div class="mui-inline" style="margin-top: -50px;">
					<img id='u_head' class="mui-icon-image" src="img/head/09.jpg" style="height: 80px;border-radius:50%;"/>
				</div>
				<h3 id='u_name'>用户昵称</h3>
				</center>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>账号:</label>
						<h4 id='u_username' style="line-height: 140%;">yonghu1</h4>
					</div>
					<div class="mui-input-row">
						<label>年龄:</label>
						<h4 id='u_age' style="line-height: 140%;">22</h4>
					</div>
					<div class="mui-input-row">
						<label>性别:</label>
						<h4 id='u_sex' style="line-height: 140%;">男</h4>
					</div>
					<div class="mui-input-row">
						<label>住址:</label>
						<h4 id='u_address' style="line-height: 140%;">成都-武侯区</h4>
					</div>
					<div class="mui-input-row">
						<label>手机:</label>
						<h4 id='u_phone' style="line-height: 22px;">13388889999</h4>
					</div>
					<div class="mui-input-row">
						<label style="width: 30%;">创建时间:</label>
						<h4 id='u_create_time' style="line-height: 140%;width: 70%;">2018-04-22</h4>
					</div>
				</form>
			</div>									
			<div class="mui-content-padded" style="height: 95px;margin-top: 20px;">
				<center>
				<button id="to_user_subject" type="button" class="mui-btn" style="width: 130px;right: 20px;">
					个人题库
				</button>
				
				<button id="to_user_change" type="button" class="mui-btn mui-btn-primary" style="width: 130px;left: 20px;">
					编辑信息
				</button>
				</center>
			</div>			
		</div>				
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="#login">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#main">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">2</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="login.html">
				<span class="mui-icon mui-icon-help"></span>
				<span class="mui-tab-label">关于我们</span>
			</a>
			<a class="mui-tab-item mui-active" href="user_center.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/app.js"></script>
	<script src="js/DHJ.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能					
		});
		function onloadbody(){
			var uid = localStorage.getItem("uid");
			if(uid!=""){
				mui.ajax({
					url:locationIP+"getUser",
					data:{
						uid:uid
					},
					dataType:'json',
					type:'post',
					success:function(data){
						//查看获取的数据状态
						console.log(JSON.stringify(data));
						if(data==null){
							mui.openWindow({
								url:'index.html',
								id:'index.html',
							});
						}else{
							//设置个人信息
							document.getElementById("u_head").src=data.user.uHead;
							document.getElementById("u_name").innerHTML=data.user.uName;
							document.getElementById("u_username").innerHTML=data.user.uUsername;
							document.getElementById("u_age").innerHTML=data.user.uAge;
							document.getElementById("u_sex").innerHTML=data.user.uSex;
							document.getElementById("u_address").innerHTML=data.user.uAddress;
							document.getElementById("u_phone").innerHTML=data.user.uPhone;
							document.getElementById("u_create_time").innerHTML=data.u_create_time;						
						};																
					},
					error: function(xhr,type,errorThrown){
		                mui.toast(type);
		            }
				});
			}else{
//				mui.openWindow({
//					url:'login.html',
//					id:'login.html',
//				});
			};
		};
		
		//个人题库按钮
		document.getElementById("to_user_subject").addEventListener('tap',function(){
			mui.openWindow({
				url:'user_subject.html',
				id:'user_subject.html',
			});
		});
		
		//编辑信息按钮
		document.getElementById("to_user_change").addEventListener('tap',function(){
			mui.openWindow({
				url:'user_change.html',
				id:'user_change.html',
			});
		});
	</script>
</html>